<template>
  <div class="login">
    <div class="title">博益矿用三维建模平台</div>
    <el-form ref="elFormRef" class="login-form" :model="form" label-width="auto" size="default">
      <el-form-item label="" prop="username" :rules="{ required: true, message: '请输入煤矿编码' }">
        <el-input v-model.trim="form.username" placeholder="请输入煤矿编码" />
      </el-form-item>
      <el-form-item label="" prop="password" :rules="{ required: true, message: '请输入密码' }">
        <el-input v-model.trim="form.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-button class="submit" type="primary" size="default" :loading="loading" @click="submit">
        登录
      </el-button>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { useOperationConfiguration } from '@renderer/stores/operationConfiguration'
import { useRouter } from 'vue-router'
import { login } from '@renderer/api'

const loading = ref(false)
const form = reactive({
  // username: '520529015466', // 红林
  username: '520523015641', // 龙凤
  password: '000000'
})

const elFormRef = ref<FormInstance>()
const { setUserInfo } = useOperationConfiguration()
const router = useRouter()
function submit() {
  elFormRef.value?.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const { data } = await login(form)
        setUserInfo(data)
        router.push('/')
      } catch (error) {
        ElMessage.error({
          message: error as string
        })
      } finally {
        setTimeout(() => {
          loading.value = false
        }, 1000)
      }
    }
  })
}

const versions = ref()
onMounted(async () => {
  versions.value = await window.electron.ipcRenderer.invoke('get-versions')
})
</script>
<style lang="scss" scoped>
.login {
  background: var(--main-background);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 36px;
  color: var(--active-background);
  font-weight: bold;
  letter-spacing: 2px;
}

.login-form {
  margin: 20px 50px 10px 50px;
}

.submit {
  width: 100%;
}
</style>
